import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import {
  Avatar,
  Breadcrumb,
  Button,
  Col,
  FloatButton,
  Layout,
  Menu,
  Popover,
  Row,
  Tooltip,
} from 'antd';
import { useState } from 'react';
import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';

import FileManageDrawer from '@/components/FileManageDrawer';
import LogoutModal from '@/components/LogoutModal';
import { systemType } from '@/constant/systemType';
import useBreadCrumb from '@/router/Breadcrumb';
import localINFO from '@/utils/localInfo';

import logo from '../../img/logo.png';
import schoolLogo from '../../img/school.png';
import menuItems from './menuItems';
import styles from './styles.module.less';
const { Header, Content, Footer, Sider } = Layout;

const Homepage: React.FC = () => {
  const name = systemType === 'school' ? 'HUST密码机' : '中数密码机';
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = useState(false);
  const { items } = useBreadCrumb();
  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
  const [isFileManageDrawerOpen, setIsFileManageDrawerOpen] = useState(false);
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        collapsedWidth={50}
        onCollapse={(value) => setCollapsed(value)}
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0,
        }}
      >
        <Header className="site-layout-background" style={{ padding: 0, color: 'white' }}>
          <div
            style={{ display: 'flex', alignItems: 'center', backgroundColor: '#002140' }}
          >
            {!collapsed && (
              <img
                src={systemType === 'school' ? schoolLogo : logo}
                alt="Logo"
                style={{
                  width: '35px',
                  height: '35px',
                  marginLeft: '20px',
                  marginRight: '15px',
                }}
              />
            )}
            {!collapsed && name}
          </div>
        </Header>
        <Menu
          className={styles.Menu}
          onClick={({ key }) => {
            switch (key) {
              // 系统
              case 'menusub1':
                navigate('/system');
                break;
              // 设备管理
              case 'menusub2':
                navigate('/device');
                break;
              // 设备状态
              case 'menu5':
                navigate('/device/device-status');
                break;
              // 设备配置
              case 'menu7':
                navigate('/device/device-config');
                break;
              // 设备信息
              case 'menu6':
                navigate('/device/device-info');
                break;
              // 三层密钥管理
              case 'menusub3':
                navigate('/key-management');
                break;
              // 日志管理

              // 管理日志
              case 'menu1':
                navigate('/log/manage-log');
                break;

              // 系统日志
              case 'menu3':
                navigate('/log/system-log');
                break;
              // 接口日志
              case 'menu4':
                navigate('/log/interface-log');
                break;
              case 'menusub5':
                navigate('/user-management');
                break;
              case 'menusub6':
                setIsFileManageDrawerOpen(true);
                break;
              case 'menusub7':
                navigate('/bw-list');
                break;
              default:
                break;
            }
          }}
          theme="dark"
          // defaultSelectedKeys={['menusub2']}
          // defaultOpenKeys={['menusub1', 'menusub2']}
          mode="inline"
          items={menuItems}
        />
      </Sider>
      <Layout
        className="site-layout"
        style={
          collapsed
            ? { marginLeft: 50, transition: 'margin-left 0.3s ease-in-out' }
            : { marginLeft: 200 }
        }
      >
        <Header
          style={{
            backgroundColor: '#fff',
          }}
        >
          <Row wrap={false} justify="space-between" style={{ width: '100%' }}>
            <Col flex="auto">
              <Breadcrumb
                style={{
                  marginLeft: '-20px',
                  marginTop: '20px',
                }}
                items={items}
              />
            </Col>
            <Col>
              <Popover
                arrow={false}
                placement="bottomLeft"
                content={
                  <>
                    <div
                      style={{ display: 'flex', alignItems: 'center', width: '120px' }}
                    >
                      <Button
                        type="text"
                        onClick={() => {
                          setIsLogoutModalOpen(true);
                        }}
                        icon={<LogoutOutlined />}
                      >
                        退出登录
                      </Button>
                    </div>
                  </>
                }
                trigger="click"
              >
                <Avatar
                  style={{
                    backgroundColor: '#5C92FE',
                    marginRight: '10px',
                  }}
                  size="large"
                  icon={<UserOutlined />}
                />
              </Popover>
              <Tooltip
                title={`当前用户为：${localINFO.getCurrentUserName()}`}
                color={'#0179FE'}
                placement="bottom"
              >
                <span>{`您好！${
                  localINFO.getRoleId() === 1 ? '管理员' : '操作员'
                }`}</span>
              </Tooltip>
            </Col>
          </Row>
        </Header>
        <Content style={{ margin: '24px 0px -24px 0px' }}>
          <div
            className="site-layout-background"
            style={{ padding: 24, minHeight: '80vh' }}
          >
            <Outlet />
            <LogoutModal visible={isLogoutModalOpen} setVisible={setIsLogoutModalOpen} />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          {systemType === 'school'
            ? `Copyright ©${new Date().getFullYear()} 哈尔滨理工大学`
            : `Copyright ©${new Date().getFullYear()} 中数（深圳）时代科技有限公司`}
        </Footer>
      </Layout>
      <FileManageDrawer
        open={isFileManageDrawerOpen}
        setOpen={setIsFileManageDrawerOpen}
      />
      <Tooltip placement="topLeft" title={'文件管理'}>
        <FloatButton onClick={() => setIsFileManageDrawerOpen(true)} />
      </Tooltip>
    </Layout>
  );
};

export default Homepage;
